<template>
  <div class="container">
    <van-nav-bar title="任务数据" left-arrow @click-left="$router.back()" />
    <div>
      <div>

      </div>
      <div class="gridT">

        <van-grid column-num="3" :border="false">
          <van-grid-item>
            <p>0</p>
            <p>任务总量</p>
          </van-grid-item>
          <van-grid-item>
            <p>0</p>
            <p>完成任务量</p>
          </van-grid-item> <van-grid-item>
            <p>0</p>
            <p>运输里程(km)</p>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="cal">
        <van-calendar :show-title="false" :lazy-render="false" :show-subtitle="false" :poppable="false" :show-confirm="false" :style="{ height: '360px' }" />
      </div>
    </div>
    <div>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
    </div>
  </div>
</template>

<script>
import { calendar } from '@/api/user'
export default {
  name: 'CalendarIndex',
  data () {
    return {
      value: 1,
      show: false
    }
  },
  created () {
    // this.getCalendar()
  },
  methods: {
    async getCalendar () {
      const res = await calendar()
      console.log(res)
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .van-icon-arrow-left:before {
  color: black;
}

.my-swipe .van-swipe-item {
  margin-top: 10px;
  color: #fff;
  font-size: 20px;
  text-align: center;
  font-weight: 700;

}

.gridT {
  background-color: #fff;
  height: 110px;
  // padding: 13px 24px;
  margin-top: 20px;
  border-radius: 12px;

  .van-grid {

    font-weight: 700;
    // p:nth-child(1){

    // }
    p:nth-child(2) {
      // height: 34px;
      // line-height: 34px;
      font-size: 12px;
      // padding: 0 0 10px;
    }
  }
}
.cal{
  margin-top: 40px;
  ::v-deep .van-calendar__month-title{
    display: none;
  }
}
</style>
